<template>
    <div class="prepend-select">
        <div class="select-group__prepend">
            <slot name="prepend"></slot>
        </div>
        <el-cascader v-model="_value" :props="props"  filterable clearable v-bind="$attrs" @change="change"></el-cascader>
    </div>
</template>

<script>
/**
 * 地区选择器
 */
import { useSlots } from 'vue'
export default {
    name: 'prependCascader',
    props: {
        modelValue: {
            type: Object,
            default: []
        },
        checkStrictly: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        modelValue: {
            handler(newVal) {
                this._value = newVal
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            class: '',
            _value: [],
        }
    },
    methods: {
        /**
         * 数据发生改变的时候
         */
        change(value) {
            this.$emit('update:modelValue', value)
            return value;
        },
    }
}
</script>
<style lang="scss" scoped>
.prepend-select {
    --el-input-height: var(--el-component-size);
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-border-color: var(--el-border-color);
    
    width: 100%;
    display: inline-flex;
    align-items: stretch;
    position: relative;
    font-size: var(--el-font-size-base);
    line-height: var(--el-input-height);
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: var(--el-input-border-radius);
    
    :v-deep {
        .el-input__wrapper {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
    
    .select-group__prepend {
        background-color: var(--el-fill-color-light);
        color: var(--el-color-info);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        border-radius: var(--el-input-border-radius);
        padding: 0 20px;
        white-space: nowrap;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,0 1px 0 0 var(--el-input-border-color) inset,0 -1px 0 0 var(--el-input-border-color) inset;
    }
}
</style>
